<page-header title="客户详情" [breadcrumb]="breadcrumb" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>客户管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>客户详情</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
</page-header>

<page-container>
    <tab-container>
        <tab-item title="客户信息">
            <ql-card header="基本信息">
                <div ql-row>
                    <div ql-col [span]="4">
                        <!-- {{detailData.customerPic}} -->
                        <img class="imgcss" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2599016565,2976694234&fm=26&gp=0.jpg" alt="" />
                        <p class="ql-text-center ql-margin-top ">{{detailData.customerStar}}</p>
                        <ql-rate class="ql-text-center" [model]="4" [max]="4" [qlDisabled]="true"> </ql-rate>
                    </div>
                    <div class="rightcss" ql-col [span]="20">
                        <h5>{{detailData.customername}}({{detailData.age}}岁,{{detailData.sex}})</h5>
                        <h5>身份证号:{{detailData.certno}}</h5>
                        <p>
                            <ql-tag class="mr-3" type="danger" *ngFor="let item of tagListData">{{item.tagname}}</ql-tag>
                            <!-- <ql-tag class="mr-3" type="danger">潜力价值客户</ql-tag>
                                <ql-tag class="mr-3" type="primary">旅游达人</ql-tag>
                                <ql-tag class="mr-3" type="warning">有房一族</ql-tag>
                                <ql-tag class="mr-3" type="success">理财小白</ql-tag>
                            -->
                        </p>
                        <div class="rightcss" ql-col [span]="7">
                            <span>客户经理:</span>
                            <span>{{detailData.chargename}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>客户类型:</span>
                            <span>{{detailData.customertype}}</span>
                        </div>
                        <!-- <div class="rightcss" ql-col [span]="10">
                            <span>客户分组:</span>
                            <span>{{detailData.groupname}}</span>
                        </div> -->
                        <div class="rightcss" ql-col [span]="10">
                            <span>综合积分:</span>
                            <span>{{detailData.comprehensiveintegration}}分</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>AUM:</span>
                            <span>{{detailData.aum}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>归属机构:</span>
                            <span>{{detailData.orgname}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="10">
                            <span>出生日期:</span>
                            <span>{{detailData.birthday}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>星座:</span>
                            <span>{{detailData.constellation}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>财富潜力值:</span>
                            <span>{{detailData.wealthpotentialvalue}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="10">
                            <span>电话:</span>
                            <span>{{detailData.contact}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>微信：</span>
                            <span>{{detailData.wechat}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>邮箱：</span>
                            <span>{{detailData.email}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="10">
                            <span>资产余额：</span>
                            <span>{{detailData.assetbal}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>平均月收入:</span>
                            <span>{{detailData.monthlyincome}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="7">
                            <span>平均月支出:</span>
                            <span>{{detailData.monthlyexpenditure}}</span>
                        </div>
                        <div class="rightcss" ql-col [span]="10">
                            <p>家庭住址：{{detailData.address}}</p>
                        </div>
                        <!-- <div ql-col [span]="2"></div> -->
                    </div>
                </div>
            </ql-card>
            <ql-card header="家庭信息">
                <label-container column="4" [border]="true" labelWidth="180">
                    <label-item label="家庭人口">{{detailData.familypopulation}}</label-item>
                    <label-item label="供养人数">{{detailData.supportpopulation}}</label-item>
                    <label-item label="子女人数 ">{{detailData.childpopulation}}</label-item>
                    <label-item label="是否有未成年子女">{{detailData.isderagedchildren}}</label-item>
                    <label-item label="家庭总资产">{{detailData.householdassets}}万</label-item>
                    <label-item label="家庭总负债">{{detailData.householdliabilities}}万</label-item>
                    <label-item label="家庭对外担保总额">{{detailData.outtotalguarantee}}万</label-item>
                    <label-item label="家庭年总收入">{{detailData.householdincome}}万</label-item>
                    <label-item label="有无房产">{{detailData.ishouseproperty}}</label-item>
                    <label-item label="有无私家车">{{detailData.isprivatecar}}</label-item>
                    <label-item label="主要经济来源">{{detailData.economicsource}}</label-item>
                    <label-item label="主要支出方向">{{detailData.directionofexpenditure}}</label-item>
                    <label-item label="家庭情况说明">{{detailData.familysituationdes}}</label-item>
                    <label-item label="我行家庭存款余额">{{detailData.mybankdeposit}}万</label-item>
                    <label-item label="我行家庭投资理财余额">{{detailData.mybankfamilyfincbal}}万</label-item>
                    <label-item label="我行家庭贷款余额">{{detailData.mybankfamilyloadbal}}万</label-item>
                    <label-item label="家庭可投资资产">{{detailData.familyinvestablassets}}万</label-item>
                    <label-item label="可投资资产占家庭总比">{{detailData.familyinvestablassetsratio * 100}}%</label-item>
                    <label-item label="活期存款占家庭总资产比">{{detailData.currentfamilydepositratio * 100}}%</label-item>
                    <label-item label="定期存款占家庭总资产比">{{detailData.regularfamilydepositratio * 100}}%</label-item>
                    <label-item label="国债占家庭总资产比">{{detailData.nationaldebtfamilyratio * 100}}%</label-item>
                    <label-item label="理财占家庭总资产比">{{detailData.reasonfamilyratio * 100}}%</label-item>
                    <label-item label="基金占家庭总资产比">{{detailData.fundfamilyratio * 100}}%</label-item>
                    <label-item label="保险占家庭总资产比">{{detailData.insurancefamilyratio * 100}}%</label-item>
                    <label-item label="信托占家庭总资产比">{{detailData.trustfamilyratio * 100}}%</label-item>
                    <label-item label="股票占家庭总资产比">{{detailData.sharesfamilyratio * 100}}%</label-item>
                </label-container>
            </ql-card>
            <ql-card header="营销活动记录">
                <data-table [model]="marketActivity">
                    <ql-table-column model-key="campaignname" label="营销活动名称"> </ql-table-column>
                    <ql-table-column model-key="starttime" label="营销活动时间"> </ql-table-column>
                    <ql-table-column model-key="campaignresult" label="营销结果">
                        <ng-template #slot let-scope="scope">
                            {{scope.rowData.campaignresult | dict:'campaign_result'}}
                        </ng-template>
                    </ql-table-column>
                </data-table>
            </ql-card>
            <ql-card header="产品到期提醒">
                <data-table [model]="duetoProduct">
                    <ql-table-column model-key="productCode" label="产品代码"> </ql-table-column>
                    <ql-table-column model-key="productName" label="产品名称"> </ql-table-column>
                    <ql-table-column model-key="dueDate" label="到期时间"> </ql-table-column>
                </data-table>
            </ql-card>
            <!-- <ql-card header="活动商圈">
                <data-table [model]="shopsList">
                    <ql-table-column model-key="place" label="活动地点"> </ql-table-column>
                    <ql-table-column model-key="time" label="活动时间"> </ql-table-column>
                </data-table>
            </ql-card> -->
            <ql-card header="标签信息">
                <div class="ql-margin-top ql-margin-bottom">
                    <ql-select [clearable]="true" (modelChange)="selectChange($event)">
                        <ql-option *ngFor="let item of tagarraycate" [label]="item.label" [value]="item.value"> </ql-option>
                    </ql-select>
                </div>
                <data-table [model]="tagListData">
                    <ql-table-column model-key="tagcode" label="标签编码"> </ql-table-column>
                    <ql-table-column model-key="tagname" label="标签名字"> </ql-table-column>
                    <ql-table-column model-key="tagtype" label="标签类型"> </ql-table-column>
                </data-table>
            </ql-card>
            <ql-card header="客户签约信息">
                <!-- <p>手机银行、短信银行、微信银行、网上银行</p> -->
                <p>{{detailData.mobilebank}}</p>
            </ql-card>
        </tab-item>
        <tab-item title="客户资产">
            <ql-card header="资产分布">
                <div ql-row>
                    <div ql-col [span]="24" echarts [options]="options1"></div>
                </div>
                <div class="customerassets">
                    <data-table [model]="assetsData">
                        <ql-table-column model-key="creditbal" label="信用卡透支余额"></ql-table-column>
                        <ql-table-column model-key="fixeddepbal" label="定期存款余额"></ql-table-column>
                        <ql-table-column model-key="assetbal" label="总资产余额"></ql-table-column>
                        <ql-table-column model-key="financiabal" label="理财产品余额"></ql-table-column>
                        <ql-table-column model-key="treabondbal" label="国债产品余额"></ql-table-column>
                        <ql-table-column model-key="othdepbal" label="其他存款余额"></ql-table-column>
                        <ql-table-column model-key="cfcloanbal" label="cfc贷款余额"></ql-table-column>
                        <ql-table-column model-key="lquotaloanbal" label="额度类贷款类余额"></ql-table-column>
                        <ql-table-column model-key="othprodbal" label="其他资产余额"></ql-table-column>
                        <ql-table-column model-key="currdepbal" label="活期存款余额"></ql-table-column>
                        <ql-table-column model-key="houseloanbal" label="住房类贷款余额"></ql-table-column>
                        <ql-table-column model-key="preciousmetalbal" label="贵金属产品余额"></ql-table-column>
                        <ql-table-column model-key="margindepbal" label="保证金存款余额"></ql-table-column>
                        <ql-table-column model-key="fundbal" label="基金产品余额"></ql-table-column>
                        <ql-table-column model-key="debtbal" label="总负债金额"></ql-table-column>
                        <ql-table-column model-key="stockbal" label="股票产品产品余额"></ql-table-column>
                    </data-table>
                </div>
            </ql-card>
            <!-- <ql-card header="消费统计">
                <label-container column="4" [border]="true">
                    <label-item label="月消费金额">3万</label-item>
                    <label-item label="比上月">-1%</label-item>
                    <label-item label="年消费金额">45万</label-item>
                    <label-item label="比去年">+3%</label-item>
                </label-container>
            </ql-card> -->
            <ql-card header="交易记录">
                <div class="ql-margin-top ql-margin-bottom">
                    <!-- <ql-select>
                        <ql-option *ngFor="let item of dictService.getDict('trans_type')" [label]="item.paramLabel" [value]="item.paramValue"></ql-option>
                    </ql-select> -->
                </div>
                <data-table [model]="tradList">
                    <ql-table-column model-key="tranNo" label="交易编码"> </ql-table-column>
                    <ql-table-column model-key="trantype" label="交易类型"> </ql-table-column>
                    <ql-table-column model-key="tranDate" label="交易时间"> </ql-table-column>
                    <ql-table-column model-key="accountName" label="账户名称"> </ql-table-column>
                </data-table>
            </ql-card>
        </tab-item>
        <tab-item title="互动记录">
            <ql-card>
                <data-table [model]="contactData">
                    <ql-table-column model-key="interactNo" label="互动编号"> </ql-table-column>
                    <ql-table-column model-key="contactTopic" label="互动标题"> </ql-table-column>
                    <ql-table-column model-key="contactMain" label="互动内容"> </ql-table-column>
                    <ql-table-column model-key="contactMethod" label="互动方式"> </ql-table-column>
                    <ql-table-column model-key="interactTime" label="互动时间"> </ql-table-column>
                </data-table>
            </ql-card>
        </tab-item>
        <tab-item title="客户持有产品">
            <ql-card header="存款">
                <h4>活期存款</h4>
                <label-container column="4" [border]="true" *ngIf="assetsData.length>0 && assetsData!='underfind'">
                    <label-item label="账号">{{assetsData[0].accountno}}</label-item>
                    <label-item label="账户状态">{{assetsData[0].accountstatus}}</label-item>
                    <label-item label="币种">{{assetsData[0].currency}}</label-item>
                    <label-item label="本金">{{assetsData[0].currdepbal}}</label-item>
                </label-container>
                <h4>定期存款</h4>
                <label-container column="4" [border]="true" *ngIf="assetsData.length>0 && assetsData!='underfind'">
                    <label-item label="账号">{{assetsData[0].accountno}}</label-item>
                    <label-item label="账户状态">{{assetsData[0].accountstatus}}</label-item>
                    <label-item label="币种">{{assetsData[0].currency}}</label-item>
                    <label-item label="本金">{{assetsData[0].fixeddepbal}}</label-item>
                </label-container>
            </ql-card>
            <ql-card header="客户持有产品">
                <div class="customerassets ql-margin-top ql-padding">
                    <data-form [showReset]="false" label-width="200" (submit)="customerProduct()">
                        <ql-form-item label="产品类别">
                            <ql-select [(ngModel)]="productCate">
                                <ql-option *ngFor="let item of dictService.getDict('product_category')" [label]="item.paramLabel" [value]="item.paramValue"></ql-option>
                            </ql-select>
                        </ql-form-item>
                        <ql-form-item label="产品名称">
                            <ql-input [(ngModel)]="productName"></ql-input>
                        </ql-form-item>
                        <ql-form-item label="产品代码">
                            <ql-input [(ngModel)]="productCode"></ql-input>
                        </ql-form-item>
                        <!-- <ql-form-item label="客户电话">
                            <ql-input></ql-input>
                        </ql-form-item>
                        <ql-form-item label="产品持有金额范围">
                            <ql-select [(model)]="valuecate" [clearable]="true">
                                <ql-option *ngFor="let item of category" [label]="item.label" [value]="item.value"> </ql-option>
                            </ql-select>
                        </ql-form-item>
                        <ql-form-item label="日期">
                            <ql-date-picker> </ql-date-picker>
                        </ql-form-item> -->
                    </data-form>
                    <data-table [model]="customerproductdata">
                        <ql-table-column model-key="productCode" [render-html]="true" label="产品代码"></ql-table-column>
                        <ql-table-column model-key="productCategory" [render-html]="true" label="产品类别"></ql-table-column>
                        <ql-table-column model-key="productName" [render-html]="true" label="产品名称"></ql-table-column>
                        <ql-table-column model-key="productHodAmt" [render-html]="true" label="产品持有额"></ql-table-column>
                        <ql-table-column model-key="productRiskGrad" [render-html]="true" label="产品风险等级"></ql-table-column>
                        <ql-table-column model-key="pruchDate" [render-html]="true" label="产品购买时间"></ql-table-column>
                    </data-table>
                    <!-- <div class="btncss">
                        <ql-button size="small" type="success">发送短信</ql-button>
                        <ql-button size="small" type="info">发送邮件</ql-button>
                    </div> -->
                </div>
            </ql-card>
        </tab-item>
        <tab-item title="推荐产品">
            <ql-card>
                <div ql-row>
                    <div class="row ql-padding ql-margin-top" *ngFor="let item of tjcpdata" style="border: 1px solid gainsboro;">
                        <div ql-col span="5">
                            <h5>{{ item.productName }}</h5>
                        </div>
                        <div ql-col span="7">
                            <p class="lccpcss">
                                产品代码：<span style="color:blue">{{ item.productCode }}</span>
                            </p>
                            <p class="lccpcss">
                                风险等级：<span style="color: red;">{{ item.riskLevelCode }}</span>
                            </p>
                            <p class="lccpcss">年收益率：{{ item.yearsProfit }}</p>
                            <!-- <p class="lccpcss">销售渠道：{{ item.kandel }}</p> -->
                        </div>
                        <div ql-col span="7">
                            <p class="lccpcss">发售起始日期：{{ item.createTime }}</p>
                            <p class="lccpcss">发售截至日期：{{ item.ceaseSaleTime }}</p>
                            <p class="lccpcss">产品周期：{{ item.productPeriodicity }}天</p>
                            <!-- <p class="lccpcss" style="color: blue;">{{ item.decsrible }}</p> -->
                        </div>
                        <div ql-col span="5">
                            <!-- <ql-button type="primary" size="small">详情</ql-button> -->
                        </div>
                    </div>
                </div>
            </ql-card>
        </tab-item>
        <tab-item title="客户信息采集">
            <div ql-row>
                <div class="row wrapinfo">
                    <ql-card header="基本信息">
                        <ng-template #header>
                            <card-header title="基本信息">
                                <ql-button type="primary" size="small" (click)="addInfoFun()">信息补充</ql-button>
                            </card-header>
                        </ng-template>
                        <label-container column="3" [border]="true" labelWidth="120">
                            <label-item label="姓名">{{detailData.customername}}</label-item>
                            <label-item label="性别">{{detailData.sex | dict:'sex'}}</label-item>
                            <label-item label="证件类型">{{detailData.certtype}}</label-item>
                            <label-item label="证件号码">{{detailData.certno}}</label-item>
                            <label-item label="职业">{{detailData.professionaltitle}}</label-item>
                            <label-item label="单位">{{detailData.workunit}}</label-item>
                            <label-item label="个人年收入">{{detailData.yearincome}}</label-item>
                            <label-item label="微信号码">{{detailData.wechat}}</label-item>
                            <label-item label="邮箱">{{detailData.email}}</label-item>
                            <!-- <label-item label="邮编">{{detailData.yearincome}}</label-item> -->
                            <!-- <label-item label="感兴趣产品类型">股票类</label-item>
                            <label-item label="潜在客户群名称"></label-item> -->
                        </label-container>
                    </ql-card>
                    <ql-card header="标签列表">
                        <ng-template #header>
                            <card-header title="标签列表">
                                <ql-button type="primary" size="small" (click)="addTagFun()">增加手动标签</ql-button>
                            </card-header>
                        </ng-template>
                        <data-table [model]="tagListData">
                            <ql-table-column model-key="tagcode" label="标签编码"> </ql-table-column>
                            <ql-table-column model-key="tagname" label="标签名称"> </ql-table-column>
                            <ql-table-column model-key="tagtype" label="标签类型"> </ql-table-column>
                        </data-table>
                    </ql-card>
                </div>
            </div>
        </tab-item>
    </tab-container>
</page-container>

<ng-template #addInfo>
    <ql-card>
        <ql-form ql-row gutter="24" class="ql-margin-top">
            <ql-form-item label="微信号码" ql-col span="12">
                <ql-input placeholder="请输入内容"></ql-input>
            </ql-form-item>
            <ql-form-item label="邮箱" ql-col span="12">
                <ql-input placeholder="请输入内容"></ql-input>
            </ql-form-item>
            <ql-form-item label="邮编" ql-col span="12">
                <ql-input placeholder="请输入内容"></ql-input>
            </ql-form-item>
            <ql-form-item label="潜在客户群名称" ql-col span="12">
                <ql-input placeholder="请输入内容"></ql-input>
            </ql-form-item>
            <ql-form-item ql-col span="24" class="ql-text-right">
                <ql-button type="primary" size="small">重置</ql-button>
                <ql-button type="primary" size="small" (click)="modal.close()">保存</ql-button>
            </ql-form-item>
        </ql-form>
    </ql-card>
</ng-template>

<ng-template #addTag>
    <ql-card>
        <ql-form ql-row gutter="24" class="ql-margin-top">
            <ql-form-item label="标签名称" ql-col span="12">
                <ql-input placeholder="请输入内容"></ql-input>
            </ql-form-item>
            <ql-form-item label="标签分类" ql-col span="12">
                <ql-select [clearable]="true">
                    <ql-option *ngFor="let item of tagCatesels" [label]="item.label" [value]="item.value"> </ql-option>
                </ql-select>
            </ql-form-item>
            <ql-form-item label="标签类型" ql-col span="12">
                <ql-select [clearable]="true">
                    <ql-option *ngFor="let item of tagTypesels" [label]="item.label" [value]="item.value"> </ql-option>
                </ql-select>
            </ql-form-item>
            <ql-form-item label="标签时间" ql-col span="12">
                <ql-date-picker></ql-date-picker>
            </ql-form-item>
            <ql-form-item ql-col span="24" class="ql-text-right">
                <ql-button type="primary" size="small">重置</ql-button>
                <ql-button type="primary" size="small" (click)="modal.close()">保存</ql-button>
            </ql-form-item>
        </ql-form>
    </ql-card>
</ng-template>